<!-- 供应商-单据 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<u-scroll-list :indicator="false" class="p-b-0">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 前欠 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.amountPayable||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 应付 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.amountPaid||0}} </view>
					</view>
				</view>
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 付款 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.amountPayable||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 累欠 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.debtTotal||0}} </view>
					</view>
				</view>
			</view>
		</u-scroll-list>
		<view class="flex flex-c grey p-t-8 p-b-8">{{time}}</view>
		
		<view class="list-box">
			<view class="dl-item flex" v-for="(item,index) in indexList" :key="item.billId" @click="toNext(item)">
				<view class="dt-box">
					<u-avatar
					    fontSize="16"
						size="50"
					    randomBgColor
					    :text="item.billTypeName.substring(0,2)"
					></u-avatar>
				</view>
				<view class="dd-box">
					<view class="time p-b-16 p-t-10">{{item.businessTime}}</view>
					<view class="order-id p-b-16">{{item.billNo}}</view>
					<view class="time p-b-16">累欠：{{item.debtTotal}}</view>
					<view class="money f-40 red" v-if="item.amountPayable>0">
						+{{item.amountPayable}}
					</view>
					<view class="money f-40" v-else-if="item.amountPayable==0">
						{{item.amountPayable}}
					</view>
					<view class="money f-40 green" v-else>
						{{item.amountPayable}}
					</view>
				</view>
			</view>
			<!-- <loading-finished v-if="isLoadFinished"></loading-finished> -->
			<u-loadmore dashed line :status="status" loadingText="努力加载中" loadmoreText="轻轻上拉" nomoreText="实在没有了" />
		</view>
	</view>
</template>

<script>
	import { supplierListBillsPage } from "@/apis/bill/reconciliation";
	import { reconciliationGorouter } from '@/utils/util.js'
	// import loadingFinished from '@/components/loading-finished/index.vue'
	export default {
		name: '',
		components: {
			// loadingFinished
		},
		data() {
			return {
				config: {
				  title: "供应商对账表",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				total_data: {},
				params: {
					data: {},
					page: {
						current: 1,
						size: 10,
						order: "desc",
						orders: [
						  {
						    "column": "business_time",
						    "asc": false
						  }
						]
					}
				},
				indexList: [],
				time: '',
				total: 0,
				// isLoadFinished: false
				status: 'loadmore',
			}
		},
		onLoad(opt) {
			let {supplierId, supplierName, time} = opt;
			this.config.title = opt.supplierName;
			this.time = time || '';
			this.params.data = {
				supplierId, supplierName
			};
			this.getList()
		},
		onReachBottom() {
			if(this.indexList.length<this.total) {
				this.status = 'loadmore'
				// this.isLoadFinished = false;
				this.params.page.current++
				this.getList()
			} else {
				// this.isLoadFinished = true;
				this.status = 'nomore'
			}
		},
		methods: {
			clickBtn(item) {
			  // if (item.key === "btn1") {
			  //   this.show = true
			  // }
			},
			// 列表
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.status = 'loading'
				supplierListBillsPage(this.params).then(res=>{
					if (!res.flag) return;
					const data = res.data || {};
					this.total_data = data.footerTotal||{};
					this.total = data.total || 0;
					if (this.params.page.current == 1) {
					  this.indexList = data.records;
					} else {
					  this.indexList = [...data.records, ...this.indexList];
					}
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 跳转根据业务类型跳转对应的页面：收款-收款单；销售-销售开单；采购-来货结算；付款-付款单；
			toNext(val) {
				console.log("val",val);
				reconciliationGorouter(val.billType, val.billId,this)
			}
		},
		mounted() {
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
		.t_item {
			flex: 1;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				width: 1rpx;
				height: 70%;
				background: #dfdfdf;
			}
			&:last-child {
				&::after {
					content: "";
					width: 0rpx;
				}
			}
		}
	}
	.list-box {
		padding: 0 20rpx 40rpx;
		.dl-item {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 10rpx 20rpx #dfdfdf;
			align-items: center;
			margin-bottom: 20rpx;
			.dd-box {
				flex: 1;
				position: relative;
				color: #999;
				padding-left: 20rpx;
				.money {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
	
</style>